<template>
  <Layout>
    <template slot="header" class="head-main">
      <Header @change="changeComponent" ref="head" style="height: 80px;"></Header>
    </template>

    <template slot="aside">
      <AsideMenu
        @onActive="changeActive"
        ref="customMenu"
        style="width: 230px;"
      ></AsideMenu>
    </template>

    <template slot="breadcrumb">
      <!--<breadcrumb></breadcrumb>-->
    </template>
    <template slot="body">
      <!--<keep-alive>-->
        <component :is="activeComponent" ref="module" :params="params" :key="activeComponent"/>
      <!--</keep-alive>-->
    </template>
  </Layout>
</template>
<script>

import Layout from '@/common/layout/default';
import Header from '@/common/header/Header';
import GroupHeader from '@/common/header/GroupHeader';
import Footer from '@/common/Footer';
import AsideMenu from '@/common/menu/AsideMenu';
import breadcrumb from '@/common/breadcrumb/index';
import ComsUtil from '@/util/components';

var c = Object.assign(
  {
    Header,
    GroupHeader,
    Footer,
    breadcrumb,
    AsideMenu,
    Layout,
  },
  ComsUtil.localRequire()
);
export default {
  components: c,
  data() {
    return {
      index: '',
      params: undefined,
      activeComponent: '',
    };
  },

  methods: {
    changeActive(menu, params, from) {
      this.$nextTick(function() {
        this.activeComponent = menu.path;
        this.params = params;
      });
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {});
  },
};
</script>

<style scoped lang="less">
.head-title {
  height: 90px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .head-text{
    font-family: '华文行楷 Bold', '华文行楷 Regular', '华文行楷', sans-serif;
    color: #fff;
    font-style: normal;
    font-size: 49px;
  }
}
</style>
